<template>
  <button
    :class="type"
    class="h-[40px] px-[24px] text-[16px] rounded-[4px] select-none whitespace-nowrap "
  >
    <slot></slot>
  </button>
</template>

<script setup>
const { type } = defineProps({
  type: {
    type: String,
    default: "primary",
  },
});
</script>

<style lang="scss" scoped>
.cancel {
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #b8beca;
}
.disabled {
  background-color: rgba(238, 238, 238, 1);
  color: rgba(0, 0, 0, 0.26);
  border-radius: 4px;
  cursor: not-allowed;
  border:1px solid rgba(0, 0, 0, 0.26);
  //不允许有事件
  pointer-events: none;
}

.detele {
  background: #eb2a3a;
  border-radius: 4px;
  color: white;
  &:hover {
    background: #f7545c;
  }
  &:active {
    background: #c41a2d;
  }
}
.primary {
  background: #1a66ff;
  border-radius: 4px;
  color: white;
  &:hover {
    background: #4287ff;
  }
  &:active {
    background: #0b49d9;
  }
}
.info {
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #eee;
  color: rgba(0, 0, 0, 0.26);
}
// [data-theme="dark"] {
//   .default {
//     background: #2055a6;
//     border: 1px solid #4791ec;
//   }
// }
</style>